<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="夜灯控制器"/>
    <title>夜灯控制器</title>
    <style>
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .flexCC {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #button {
            flex-direction: column-reverse;
        }

        #button>div {
            width: 100%;
            height: 100%;
            color: #ecf0f1;
            text-align: center;
            background: #f1c40f;
            border-radius: 50px;
            font-size: 36px;
        }

        #top {
            width: 100%;
            height: 100%;
            background: #1abc9c;
        }

        .sp {
            width: 32px;
            height: 32px;
            clear: both;
            margin: 20px auto;
        }

        .sp-circle {
            border: 4px rgba(0, 0, 0, 0.25) solid;
            border-top: 4px black solid;
            border-radius: 50%;
            -webkit-animation: spCircRot .6s infinite linear;
            animation: spCircRot .6s infinite linear;
        }

        @-webkit-keyframes spCircRot {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(359deg);
            }
        }

        @keyframes spCircRot {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(359deg);
            }
        }

        .hide {
            display: none;
        }

        .show {
            display: block;
        }

        #stateWorldOpen {
            box-sizing: border-box;
            padding: 78px;
            user-select: none;
        }

        #stateWorldClose {
            box-sizing: border-box;
            padding: 78px;
            user-select: none;
        }
        #htWorld{
            user-select: none;
        }
    </style>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="top" class="flexCC">
        <div id="button" class="flexCC">
            <div data-state="1" id="clickButton" class="flexCC">
                <div id="stateWorldOpen" class="show">
                    开
                </div>
                <div id="Circle" class="col-sm-2 hide">
                    <div class="sp sp-circle"></div>
                </div>
                <div id="stateWorldClose" class="hide">
                    关
                </div>
            </div>
            <h1 id="htWorld" onclick="stateHandle()"></h1>
        </div>

    </div>
</body>
<script>
    //节流函数
    function throttle(fn, wait) {
        var timer = null;
        return function () {
            var context = this;
            var args = arguments;
            if (!timer) {
                timer = setTimeout(function () {
                    fn.apply(context, args);
                    timer = null;
                }, wait)
            }
        }
    }

    function openHandle() {
        const stateWorldOpen = document.querySelector("#stateWorldOpen"),
            stateWorldClose = document.querySelector("#stateWorldClose"),
            Circle = document.querySelector("#Circle");

        stateWorldOpen.className = "hide";
        Circle.className = "col-sm-2 show";

        axios.get('/on?event=relay&eventState=1')
            .then(function (response) {
                Circle.className = "col-sm-2 hide";
                stateWorldClose.className = "show";
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    function closeHandle() {
        const stateWorldOpen = document.querySelector("#stateWorldOpen"),
            stateWorldClose = document.querySelector("#stateWorldClose"),
            Circle = document.querySelector("#Circle");

        stateWorldClose.className = "hide";
        Circle.className = "col-sm-2 show";

        axios.get('/on?event=relay&eventState=0')
            .then(function (response) {
                Circle.className = "col-sm-2 hide";
                stateWorldOpen.className = "show";
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    function stateHandle() {
        const stateWorldOpen = document.querySelector("#stateWorldOpen"),
            stateWorldClose = document.querySelector("#stateWorldClose"),
            Circle = document.querySelector("#Circle");
        axios.get('/state?event=relay&eventState=2')
            .then(function (response) {
                console.log(response)
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    function getHTAndStateHandle() {
        const stateWorldOpen = document.querySelector("#stateWorldOpen"),
            stateWorldClose = document.querySelector("#stateWorldClose"),
            Circle = document.querySelector("#Circle"),
            htWorld = document.querySelector("#htWorld");

            stateWorldOpen.className = "hide";
            Circle.className = "col-sm-2 show";

        axios.get('/htState?event=humiture')
            .then(function (response) {
                const humidity=response.data.humidity,
                        temp=response.data.temp;
                htWorld.innerText=`
                温度:${temp}度
                湿度:${humidity}%`
                console.log(response)
            })
            .catch(function (error) {
                console.log(error);
            });
        axios.get('/on?event=relay&eventState=2')
            .then(function (response) {
                const ledState=response.data;
                console.log()
                if(ledState===0){
                    stateWorldClose.className = "show";
                    Circle.className = "col-sm-2 hide";
                }
                if(ledState===1){
                    stateWorldOpen.className = "show";
                    Circle.className = "col-sm-2 hide";
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    window.onload=getHTAndStateHandle();
    document.getElementById("stateWorldOpen").addEventListener("click", throttle(openHandle, 1000));
    document.getElementById("stateWorldClose").addEventListener("click", throttle(closeHandle, 1000));
</script>

</html>